<template>
    <div style="height:4%; font-size:var(--baseFontSize); display:flex; align-items: center; ">
        <div 
          style="margin-right:var(--mPadding); cursor: pointer; font-size:var(--baseFontSize); " 
          @click=" handleGoBack(( $route.matched[$route.matched.length - 2] || {} ).path)" 
        >
            <i class="ri-arrow-left-s-line" style="color:var(--primaryColor); font-size:var(--baseFontSize);"></i>
            <span>返回</span>
        </div>
        <div>
            <template
              v-for="(item, index) in ( $route.matched || [] ).filter(i=>i.path !== '/')"
              :key="item.path"
            >
              <span :style="{ cursor: item.path !== $route.path ? 'pointer' : 'default', color: item.path !== $route.path ? 'var(--baseTextColor)' : 'var(--grayTextColor)' }" @click="()=>handleClick(item.path)" >{{ item.meta && item.meta.title }}</span>
              <span v-if=" item.path !== $route.path " style="margin:0 var(--sPadding);" >/</span>
            </template>          
        </div>
    </div>
  </template>
  
  <script setup>
    import { watch, reactive, onMounted } from 'vue';
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    const props = defineProps({
      data:{ type:Array },
    });
    function handleGoBack(backPath){
        let page = route.query.page;
        let params = { path:backPath };
        if ( page ) {
          params.query = { page };
        }
        router.push(params);
    }
    function handleClick(path){
      if ( path !== route.path ){
        router.push(path);
      }
    }
   
  </script>
  